<template>
  <div class="edit">
<!--  头部  \-->
    <van-nav-bar
      class="page-nav-bar"
      title="创作"
    >
      <template #right>
        <van-icon  class="iconfont icon-icon-test" @click="$router.push('/addArticle')"/>
      </template>
    </van-nav-bar>
<!-- 内容 -->
    <van-card
      desc="2021年9月12日 12:21"
      title="作者名字"
      class="myArticles"
    >
      <template #thumb>
        <van-image src="https://img01.yzcdn.cn/vant/cat.jpeg"
                   round
                   width="50" height="50"
                   fit="cover"

        ></van-image>
      </template>
      <template #bottom>
        这是我创作的第一篇文章啦
      </template>


      <template #footer class="footer">
        <van-icon  class="iconfont icon-dianzan1"></van-icon>
        <van-icon class="iconfont icon-huifu"></van-icon>
        <van-icon  class="zhuangfa" name="share-o" @click="showShare=true" ></van-icon>
      </template>
    </van-card>
    <van-card
      desc="2021年9月12日 12:21"
      title="作者名字"
      class="myArticles"
    >
      <template #thumb>
        <van-image src="https://img01.yzcdn.cn/vant/cat.jpeg"
                   round
                   width="50" height="50"
                   fit="cover"

        ></van-image>
      </template>
      <template #bottom>
        这是我创作的第二篇文章啦
      </template>


      <template #footer class="footer">
        <van-icon  class="iconfont icon-dianzan1"></van-icon>
        <van-icon class="iconfont icon-huifu"></van-icon>
        <van-icon  class="zhuangfa" name="share-o" @click="showShare=true" ></van-icon>
      </template>
    </van-card>
    <van-card
      desc="2021年9月12日 12:21"
      title="作者名字"
      class="myArticles"
    >
      <template #thumb>
        <van-image src="https://img01.yzcdn.cn/vant/cat.jpeg"
                   round
                   width="50" height="50"
                   fit="cover"

        ></van-image>
      </template>
      <template #bottom>
        这是我创作的第三篇文章啦
      </template>


      <template #footer class="footer">
        <van-icon  class="iconfont icon-dianzan1"></van-icon>
        <van-icon class="iconfont icon-huifu"></van-icon>
        <van-icon  class="zhuangfa" name="share-o" @click="showShare=true" ></van-icon>
      </template>
    </van-card>

<!--    分享弹窗-->
    <van-share-sheet v-model="showShare" :options="options" @select="selectShow"></van-share-sheet>
  </div>
</template>

<script>

export default {
  components: {

  },
  name: "editIndex",
  data(){
    return{
      showShare:false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    }
  },
  computed:{

  },
  methods:{
    selectShow(options){
      console.log(options)
    },
    addArticle(){

    }

  }
}
</script>

<style scoped lang="less">
.edit{
  background-color: #f2f0f0;
.icon-icon-test{
  font-size: 50px;
}
  //每一篇文章的一整个模块
  .myArticles{
    margin-top: 30px;
    background-color: white;
  }


  //头像区域
  .van-card__thumb{
    width: 100px;
    height: 100px;
  }
  //文章内容区域
  .van-card__bottom{
    margin-left: -100px;
    font-size: 40px;
  }


//底部点赞评论转发
.van-card__footer{
  .van-icon:nth-child(2){
    margin: 0 30px;
    }
    .van-icon{

       font-size: 40px;



    }
  }

}
</style>
